<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="searchData"
      :isHaveExport="false"
      @toAdd="editHotelHome"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list.data"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column label="类型名称" min-width="120">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="类型价格" min-width="120">
            <template slot-scope="scope">{{ scope.row.price }}</template>
          </el-table-column>

          <el-table-column label="市场价价格" min-width="120">
            <template slot-scope="scope">{{ scope.row.money | keepTwoNum }}</template>
          </el-table-column>

          <el-table-column label="成本价" min-width="120">
            <template slot-scope="scope">{{ scope.row.cost_price | keepTwoNum }}</template>
          </el-table-column>

          <el-table-column
            label="其他信息"
            min-width="120"
            v-if="$store.state.plugin.jfyx && $store.state.plugin.jfyx.is_open == 1"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.integral > 0">
                <span>积分兑换：{{scope.row.integral | keepTwoNum}}</span>
                <br />
                <span>可积分数量：{{scope.row.integral_number}}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-row class="myblank">
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  @click="editHotelHome(scope.row)"
                  type="primary"
                >编辑</el-button>
                <el-button
                  :loading="$store.state.isLoading"
                  size="mini"
                  type="danger"
                  @click="deleteNew(scope.row.id)"
                >删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      :title="HotelHome.id ? '编辑' : '添加'"
      :modal-append-to-body="false"
      :visible.sync="showHotelHome"
      class="tl size_13"
      width="800px"
    >
      <el-form :model="HotelHome" label-width="120px">
        <el-form-item label="类型名称" required>
          <el-col :span="12">
            <el-input v-model="HotelHome.title" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="类型价格" required>
          <el-col :span="12">
            <el-input v-model="HotelHome.price" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="成本价">
          <el-col :span="12">
            <el-input v-model="HotelHome.cost_price" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="市场价">
          <el-col :span="12">
            <el-input v-model="HotelHome.money" clearable></el-input>
          </el-col>
        </el-form-item>

        <el-form-item
          label="积分兑换"
          v-if="$store.state.plugin.jfyx && $store.state.plugin.jfyx.is_open == 1"
        >
          <el-col :span="12">
            <el-input v-model="HotelHome.integral" clearable></el-input>
          </el-col>
          <el-col :span="6">&nbsp;&nbsp;大于0则参与积分兑换</el-col>
        </el-form-item>
        <el-form-item
          label="可积分数量"
          v-if="$store.state.plugin.jfyx && $store.state.plugin.jfyx.is_open == 1"
        >
          <el-col :span="12">
            <el-input v-model="HotelHome.integral_number" clearable></el-input>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click.prevent="subHotelHome"
          >确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { hotelHomeListSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  data() {
    return {
      searchData: hotelHomeListSearchData,
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      HotelHome: {},
      showHotelHome: false,
      fileList: []
    };
  },
  components: {
    uploadpic,
    compressimgUpload
  },
  methods: {
    onSuccess1(pic) {
      this.HotelHome.img = pic;
    },
    editHotelHome(item) {
      if (item) {
        this.HotelHome = item;
        this.HotelHome.price = this.$fnc.toFixedZ(item.price);
        this.HotelHome.money = this.$fnc.toFixedZ(item.money);
        this.HotelHome.cost_price = this.$fnc.toFixedZ(item.cost_price);
        this.HotelHome.integral = this.$fnc.toFixedZ(item.integral);
      } else {
        this.HotelHome = {};
      }
      this.showHotelHome = true;
    },
    subHotelHome() {
      if (this.HotelHome.id) {
        this.$api.getHotel
          .hotel_home_type_saveedit(this.HotelHome)
          .then(res => {
            if (res.data.code == 200) {
              this.$fnc.alertSuccess("操作成功");
              this.showHotelHome = false;
              this.getNewsAll(this.searchAll);
            } else {
              this.$fnc.alertError(res.data.result);
            }
          });
      } else {
        this.HotelHome.id = this.$route.query.id;
        this.$api.getHotel.hotel_home_type_saveadd(this.HotelHome).then(res => {
          if (res.data.code == 200) {
            this.$fnc.alertSuccess("操作成功");
            this.showHotelHome = false;
            this.getNewsAll(this.searchAll);
          } else {
            this.$fnc.alertError(res.data.result);
          }
        });
      }
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll(obj);
    },
    getNewsAll(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      params.id = this.$route.query.id;
      this.$api.getHotel.hotel_home_type_lists(params).then(res => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange: function(size) {
      var params = this.searchAll;
      params.page = 1;
      params.page_size = size;
      this.pageSize = size;
      this.currentPage = 1;
      this.getNewsAll(params);
    },
    handleCurrentChange: function(currentPage) {
      var params = this.searchAll;
      params.page = currentPage;
      params.page_size = this.pageSize;
      this.currentPage = parseInt(currentPage);
      this.getNewsAll(params);
    },
    deleteNew(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id: id };
          this.$api.getHotel.hotel_home_type_del(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll(this.searchAll);
            } else {
              this.$swal("删除失败！", res.data.result, "error");
            }
          });
        }
      });
    }
  },
  created() {
    this.getNewsAll();
  }
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}
.user_table span {
  font-size: 13px;
}
</style>
